<template>
  <div class="ecologicalPointOther">
    <c-title :hide="false" :text="setTitle()"></c-title>
    <diyBackGround></diyBackGround>
    <div class="nowPrice">
      <div class="priceIs">可提现{{ecologicalName}}：{{ settingInfo.point }}</div>
      <div class="main">
        <div class="numberID" v-if="tag == 1 || tag == 2">
          <div class="txt">{{ `${tag == 1 ? "受让人ID" : "被打赏人ID"}` }}：</div>
          <input type="number" v-model="UserId" :placeholder="`请输入${tag == 1 ? '受让人ID' : '被打赏人ID'}`" />
        </div>
        <div class="balanceTxt">{{ tag == 1 ? "转让数量" : tag == 2 ? "打赏金额" : "提现金额" }}</div>
        <div class="contenBox">
          <div class="left">
            <div class="image">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" alt="" />
            </div>
            <input type="number" v-model="num_value" placeholder="0" @blur="checkNum" />
          </div>
          <div class="contenTxt" @click="allMethod">全部</div>
        </div>
        <div class="tips" v-if="tag == '1'">转让手续费：{{ settingInfo.fee_ratio }}%，需要扣除{{ecologicalName}}手续费:{{ CalculateFee }}</div>
        <div class="tips" v-if="tag == '2'">需要扣除{{ecologicalName}}:{{ num_value ? totalNum : "0" }}</div>

        <div class="btn" @click="getPostMethod">{{ tag == "1" ? "确认转让" : tag == "2" ? "确认打赏" : `提现到${balanceName}` }}</div>
      </div>
    </div>
    <van-dialog v-model="show" title="密码验证" show-cancel-button @confirm="confirmMethod">
      <van-field v-model="password" type="password" placeholder="请输入密码" :border="true" />
    </van-dialog>
  </div>
</template>
<script>
import diyBackGround from "../../member/balance/componet/diyBackGround";
import { Toast } from "vant";
export default {
  data() {
    return {
      num_value: "",
      //受让人id
      UserId: "",
      tag: "",
      password: "",
      settingInfo: {
        point: 0,
        reward: false,
        transfer: false,
        fee_ratio: 0
      },
      show: false,
      ecologicalName:''
    };
  },
  computed: {
    CalculateFee() {
      if (this.num_value) {
        return ((Number(this.settingInfo.fee_ratio) / 100) * Number(this.num_value)).toFixed(2);
      } else {
        return "0";
      }
    },
    totalNum(){
      return Number(this.num_value) / Number(this.settingInfo.point_univalent);
    }
  },
  activated() {
    this.show = false;
    this.num_value = "";
    this.tag = this.$route.params.status;
    this.ecologicalName = JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point?JSON.parse(localStorage.getItem("yz_basic_info")).ecological_point:'生态积分';
    this.balanceName =  this.fun.getCustomTextLang('member_center.credit','余额');
    this.getData();
  },
  methods: {
    // 提现保留两位小数
    checkNum(){
      this.num_value = Number(this.num_value).toFixed(2)
    },
    allMethod() {
      this.num_value = this.settingInfo.point;
    },
    setTitle() {
      let ecologicalName = this.ecologicalName;
      if (this.tag == 1) {
        this.fun.setWXTitle(`${ecologicalName}转让`)
        return `${ecologicalName}转让`;
      } else if (this.tag == 2) {
        this.fun.setWXTitle(`${ecologicalName}打赏`)
        return `${ecologicalName}打赏`;
      } else if (this.tag == 3) {
        this.fun.setWXTitle(`提现${ecologicalName}`)
        return `提现${ecologicalName}`;
      }
    },
    getData() {
      let url = "plugin.ecological-point.frontend.modules.point.controllers.asset.index";
      $http.get(url, {}, "加载中").then(response => {
        if (response.result === 1) {
          this.settingInfo = response.data;
        } else {
          Toast(response.msg);
        }
      });
    },
    confirmMethod() {
      let url = "";
      let json = {};
      if (this.tag == 1 || this.tag == 2) {
        // 打赏 转让
        if (this.tag == 2) {
          url = "plugin.ecological-point.frontend.modules.point.controllers.reward.index";
        } else {
          url = "plugin.ecological-point.frontend.modules.point.controllers.transfer.index";
        }
        json = {
          amount: this.num_value,
          recipient_id: this.UserId,
          password: this.password
        };
      } else {
        // 提现
        url = "plugin.ecological-point.frontend.modules.point.controllers.withdraw.index";
        json.amount = this.num_value;
      }
      $http.get(url, json, "加载中").then(response => {
        this.isLoadMore = true;
        if (response.result === 1) {
          Toast(response.msg);
          if (this.tag == 1 || this.tag == 2) {
            this.password = "";
            this.UserId = "";
            this.num_value = "";
          } else {
            this.num_value = "";
          }
          this.getData();
        } else {
          Toast(response.msg);
        }
      });
    },
    getPostMethod() {
      if (this.tag == 1) {
        // 转让
        if (!this.num_value || this.num_value == 0) {
          Toast("请输入转让数量");
          return;
        }
        if (!this.UserId) {
          Toast("请输入受让人ID");
          return;
        }
        if (this.settingInfo.transfer) {
          this.show = true;
          this.password = "";
        } else {
          this.confirmMethod();
        }
      } else if (this.tag == 2) {
        // 打赏
        if (!this.num_value || this.num_value == 0) {
          Toast("请输入打赏数量");
          return;
        }
        if (!this.UserId) {
          Toast("请输入打赏人ID");
          return;
        }
        if (this.settingInfo.reward) {
          this.show = true;
          this.password = "";
        } else {
          this.confirmMethod();
        }
      } else {
        // 提现
        if (!this.num_value || this.num_value == 0) {
          Toast("请输入提现数量");
          return;
        }
        this.confirmMethod();
      }
    }
  },
  components: { diyBackGround }
};
</script>
<style lang="scss" scoped>
.numberID {
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;

  .txt {
    flex-shrink: 0;
  }

  input {
    flex: 1;
    border: none;
    font-weight: 400;
    line-height: 2rem;
    border-bottom: 1px solid #ffe7e7e7;
  }
}

.nowPrice {
  text-align: left;
  margin: 0 0.625rem;
  margin-top: -9rem;

  .priceIs {
    font-size: 0.875rem;
    font-weight: 400;
    color: #333;
    margin-bottom: 0.9375rem;
  }

  .main {
    background: #fff;
    box-shadow: 0 0.0625rem 0.25rem 0 rgba(7, 11, 33, 0.11);
    border-radius: 0.3125rem;
    padding: 1.25rem 1.25rem 1.0313rem 1.25rem;

    .btn {
      margin: 0 auto;
      width: 85%;
      padding: 0.5rem 0;
      background: #f25354;
      border-radius: 0.375rem;
      font-size: 0.9688rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      margin-top: 2.2188rem;
    }

    .tips {
      font-size: 0.7188rem;
      font-weight: 400;
      color: #888;
      margin-top: 0.75rem;
      text-align: left;
    }

    .contenBox {
      display: flex;
      margin-top: 1.8125rem;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.9688rem;
      border-bottom: 1px solid #ffe7e7e7;

      .left {
        display: flex;
        align-items: center;

        input {
          width: 100%;
          border: none;
          font-weight: 400;
          font-size: 1.5938rem;
        }

        .image {
          width: 1.4063rem;
          height: 1.2813rem;
          margin-right: 1.3438rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .contenTxt {
        font-size: 0.75rem;
        font-weight: 400;
        color: #f15353;
        white-space: nowrap;
      }
    }
  }
}
</style>